<template>
	<div class="relatives">
		<custom-header-bar bg="1" title="我的亲属" backStatus="1"></custom-header-bar>
		<div class="content">
			<div class="item flex align-center justify-between" v-if="userInfo.utype == 0">
				<div>
					<div>
						<span class="name">{{ userInfo.relativesName }}</span>
						<span class="guanxi">{{ userInfo.relationshipName }}</span>
					</div>
					<div class="phone">{{ userInfo.relativesPhone }}</div>
				</div>
				<div>
					<button class="edit-btn" @click="handleClickItem(userInfo, true)">
						修改
					</button>
				</div>
			</div>
			<empty-loading v-if="userList.length === 0 && userInfo.utype != 0" type="empty" text="暂无信息"></empty-loading>
			<div v-else class="item flex align-center justify-between" v-for="item in userList" :key="item.id">
				<div>
					<div>
						<span class="name">{{ item.relativesName }}</span>
						<span class="guanxi">{{ item.relationshipName }}</span>
					</div>
					<div class="phone">{{ item.relativesPhone }}</div>
				</div>
				<div>
					<button @click="handleClickItem(item)" class="edit-btn" :style="{ backgroundColor: '#3AD4C4' }">
						查看
					</button>
				</div>
			</div>
		</div>
		<u-popup :show="show" :round="30" mode="bottom" @close="close">
			<view class="popup-content">
				<u--form class="form-wrapper" labelPosition="left" labelAlign="left" :labelStyle="labelStyle"
					labelWidth="180" :model="popupInfo" ref="formContact">
					<u-form-item label="姓名:" prop="relativesName" borderBottom ref="item1">
						<u--input placeholder="请输入姓名" v-model="popupInfo.relativesName" border="none"
							:disabled="!isEdit"></u--input>
					</u-form-item>
					<u-form-item label="手机号:" prop="relativesPhone" borderBottom ref="item1">
						<u--input placeholder="请输入手机号码" v-model="popupInfo.relativesPhone" :disabled="!isEdit"
							border="none"></u--input>
					</u-form-item>
					<u-form-item label="关系:" prop="relationshipId" borderBottom ref="item1">
						<div @click="handleShowPicker" style="width: 100%">
							<u--input disabled placeholder="请选择" :value="popupInfo.relationshipName" border="none">
							</u--input>
						</div>
						<u-icon color="#999999" size="28" slot="right" name="arrow-down"></u-icon>
					</u-form-item>
				</u--form>
				<button class="button" @click="submit()" v-if="isEdit">提交</button>
			</view>
		</u-popup>
		<u-picker v-if="showPicker" show :columns="relationshiplist" keyName="name" closeOnClickOverlay
			@close="handleCancle" @cancel="handleCancle" @confirm="handleConfirm($event)"></u-picker>
	</div>
</template>
<script>
	import CustomHeaderBar from "@/components/custom-header-bar.vue";
	import EmptyLoading from "@/components/empty-loading.vue";
	import {
		yhMiniUser,
		updateUserInfo,
		getSbEquipmentList
	} from "@/api/my";
	import {
		relationshiplist
	} from "@/api/info.js";
	import storage from "@/utils/storage";
	import {
		mapActions
	} from "vuex";
	export default {
		data() {
			return {
				self: {},
				others: [],
				show: false,
				showPicker: false,
				labelStyle: {
					fontSize: "28upx",
					color: "rgba(0, 0, 0, 0.65);",
				},
				userInfo: {},
				relationshiplist: [],
				userList: [],
				popupInfo: {},
				isEdit: false,
			};
		},
		watch: {},
		created() {
			this.userInfo = storage.getUserInfo() || {};
			this.getRelationshiplist(); // 用户关系
			if (this.userInfo.utype == 1) {
				this.getOneList();
			} else {
				this.getYhMiniUser();
			}
		},
		components: {
			CustomHeaderBar,
			EmptyLoading,
		},
		methods: {
			...mapActions(["SetUserInfo"]),
			getOneList() {
				getSbEquipmentList().then((res) => {
					if (res.data.code === 200) {
						this.userList = res.data.data;
					}
				});
			},
			// 关闭关系popup
			close() {
				this.show = false;
				this.isEdit = false;
				console.log("close");
			},
			handleClickItem(item, type) {
				this.popupInfo = JSON.parse(JSON.stringify(item));
				console.log(this.popupInfo);
				if (type) {
					this.isEdit = true;
				}
				if (this.userInfo.utype == 1) {
					uni.navigateTo({
						url: "/pages/my/relatives/info?uphone=" + item.relativesPhone,
					});
				} else {
					this.show = true;
				}
			},
			submit() {
				console.log(this.popupInfo);
				updateUserInfo(this.popupInfo).then((res) => {
					if (res.data.code === 200) {
						this.SetUserInfo();
						this.userInfo = this.popupInfo;
						this.show = false;
						this.isEdit = false;
					}else{
            uni.$u.toast(res.data.msg);
          }
				});
			},
			// 选择关系，关闭弹窗
			handleShowPicker(info) {
				if (!this.isEdit) return;
				this.show = false;
				this.$nextTick(() => {
					// this.singleIndex = 0
					this.showPicker = true;
				});
			},
			// 选择关系-取消
			handleCancle() {
				this.showPicker = false;
				this.$nextTick(() => {
					this.show = true;
				});
			},
			// 选择关系-确定
			handleConfirm(e) {
				this.popupInfo.relationshipId = e.value[0].id;
				this.popupInfo.relationshipName = e.value[0].name;
				this.handleCancle();
			},
			// 被绑定
			getYhMiniUser() {
				yhMiniUser().then((res) => {
					if (res.data.code === 200) {
						this.userList = res.data.rows;
					}
				});
			},
			// 关系列表
			getRelationshiplist() {
				relationshiplist().then((res) => {
					if (res.data.code === 200) {
						res.data.data.forEach((item) => {
							item.id = item.relationshipId;
							item.name = item.relationshipName;
							if (item.relationshipId == this.userInfo.relationshipId) {
								this.userInfo.relationshipName = item.relationshipName;
							}
						});
						this.relationshiplist.push(res.data.data);
						console.log(this.relationshiplist);
					}
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	/deep/ .u-input {
		background-color: transparent !important;
	}

	.flex {
		display: flex;
	}

	.align-center {
		align-items: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.relatives {
		height: 100%;
		box-sizing: border-box;
		padding-top: 160upx;
		background-color: #f4f4f4;

		.content {
			padding: 24upx;
		}
	}

	.item {
		height: 176upx;
		border-radius: 16rpx;
		background-color: #fff;
		margin-bottom: 24upx;
		padding: 0 30upx;

		.edit-btn {
			width: 100upx;
			height: 60upx;
			background-color: #0fce8b;
			color: #fff;
			font-size: 24upx;
			padding: 0;
		}

		.name {
			font-size: 35upx;
			color: #484848;
			font-weight: 500;
		}

		.guanxi {
			padding: 8upx;
			background-color: #eefffd;
			border-radius: 8upx;
			color: #54b6ac;
			font-size: 20upx;
			margin-left: 18upx;
		}

		.phone {
			color: rgba(0, 0, 0, 0.65);
			font-size: 28upx;
			margin-top: 15upx;
		}
	}

	.popup-content {
		height: 468upx;
		padding: 0 24upx;
		padding-top: 50upx;
		padding-bottom: 40upx;
		box-sizing: border-box;

		.tag {
			margin: 40upx 0;
			position: relative;
			left: -36upx;
			width: 230upx;
			height: 64upx;
			line-height: 64upx;
			background: #defff8;
			border-radius: 0px 0px 16upx 0px;
			color: #33ccac;
			font-weight: bold;
			font-size: 32upx;
			text-align: center;
		}

		.image {
			height: 44upx;
		}

		.arrow {
			height: 44upx;
		}

		display: flex;
		flex-direction: column;

		.form-wrapper {
			flex: 1;
		}

		.button {
			width: 100%;
			height: 88upx;
			line-height: 88upx;
			background: #61d7ca;
			border-radius: 10px 10px 10px 10px;
			opacity: 1;
			font-size: 34upx;
			color: #ffffff;
		}
	}
</style>
